<template>
    <el-input ref="searchUI" maxlength="18" class="input-search" :size="size" :placeholder="(isAppend && isPlaceholder) ? _selectedPlaceholder : placeholder" :disabled="disabled" v-timer="_onTimeSearch" v-model="input" @input="_onInputChange" :debounce="1000">
        <i slot="suffix" class="el-icon-circle-close font-14" v-if="clearable&&input.length" @click="_clearInputDataClick"></i>
        <i slot="suffix" class="emdont em-wenjian-chakan" v-else-if="!clearable"></i>
        <el-dropdown slot="append" v-if="isAppend" placement="bottom" @command="_onSelectChange">
            <span class="el-dropdown-link">
                {{ (selected || {}).label || '请选择' }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in isAppendContent" :key="index" :command="item.value">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-select v-if="isAppend" v-model="selected" slot="prepend" :size="size" placeholder="请选择" @change="_onSelectChange">
            <el-option v-for="(item, index) in isAppendContent" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
    </el-input>
</template>

<script>
export default {
    name: 'search-ui',
    props: {
        placeholder: { type: String, default: '请输入搜索内容' },
        isPlaceholder: { type: Boolean, default: true },//是否使用下菜单内容替换
        value: { type: String, default: undefined },
        disabled: { type: Boolean, default: false },
        isAppend: { type: Boolean, default: false },//是否需要下拉
        isAppendContent: { type: Array, defult() { return [] } },// 下拉框的选项
        size: { type: String, default: '' },
        clearable: { type: Boolean, default: false },
        debounceTime: { type: Number, default: 1000 }

    },

    watch: {
        value() {
            this.input = this.value;
        },

        isAppendContent(val) {
            let target = (val || []).find(item => {
                return item.value == (this.selected || {}).value
            })
            if (target) {
                this.selected = target
                return
            }
            this.selected = (val && val.length != 0) ? val[0] : {};
        }
    },
    computed: {
        _selectedPlaceholder() {
            if (this.isAppend && this.isAppendContent.length != 0) {
                let target = this.isAppendContent.find(i => i.value == this.selected.value);
                if (target) {
                    return target.placeholder || `请输入${target.label}`;
                }
            }
            return '请输入搜索内容';
        }
    },
    data() {
        return {
            input: '',
            selected: (this.isAppendContent && this.isAppendContent.length != 0) ? this.isAppendContent[0] : { label: '请选择' },
            timer: null
        }
    },
    created() {

    },
    methods: {
        _onTimeSearch() {

            if (this.isAppend && !(this.selected || {}).value) {
                this.$notify.warning('请选择查询的分类');
                return;
            }
            this.$emit('on-search', (this.selected || {}).value);
        },
        _clearInputDataClick() {
            this.input = ''
            this.$emit('input', '');
            this.$emit('change', '');
            this.$emit('on-search', (this.selected || {}).value);

        },
        _onInputChange() {
            if (this.timer !== null) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.$emit('input', this.input);
                this.$emit('change', this.input);
            }, this.debounceTime)

        },

        _onSelectChange(command) {
            this.selected = (this.isAppendContent || []).find(item => {
                return item.value == command
            }) || { value: '请选择' }
            this._onTimeSearch();
        }
    },
}
</script>

<style lang="scss" scoped>
.input-search {
    /deep/.el-input__inner {
        color: #999999 !important;
    }

    /deep/.el-input-group__prepend {
        padding: 0 8px;

        .el-select {
            .el-input__inner {
                text-align: center;
            }

            .el-input__suffix {
                right: 0px !important;
            }
        }
    }

    /deep/.el-input__suffix {
        right: 12px !important;
    }

    /deep/.el-input el-input--small el-input--suffix {
        width: 70px !important;
    }

    /deep/.el-input__suffix {
        display: flex;
        align-items: center;
        font-size: 12px;
    }
}
</style>